<template>
    <div class="approvaldetail">
        <div class="l">
            <div style="border-bottom: 1px solid #dcdfe6;padding-bottom: 20px;margin-bottom: 20px;">
                <p class="text1">申请人信息</p>
                <div style="margin-left: 5px;font-size: 14px;line-height: 30px;">
                    <p class="text2">姓名：{{ detaildata.username }}</p>
                    <div style="display: flex;justify-content: space-between;width: 500px;">
                        <div>
                            <span class="text3">部门：{{ detaildata.departmentName }}</span>
                        </div>
                        <div>
                            <span>入职时间：{{ detaildata.timeOfEntry }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <Approvaldetails :detailsList="detailsList" :processState="processState" />
        </div>
        <div class="right">
            <div style="padding: 20px;">
                <div style="margin-bottom: 20px;">审批记录</div>
            <div style="height: 300px; max-width: 600px" >
                <el-steps direction="vertical" finish-status="success" :active="3">
                    <el-step title="Step 1" />
                    <el-step title="Step 2" />
                    <el-step title="Step 3" />
                </el-steps>
            </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getApprovaldetail } from "../api/approvaldetail";
import Approvaldetails from "@/components/approval/Approvaldetails.vue";
const route = useRoute();
const detaildata: any = ref([]);
let detailsList: any = ref([])
let detailsId: any = ref(route.query.id)
let processState: any = ref('')
const render = () => {
    getApprovaldetail(detailsId.value).then((res) => {
        detaildata.value = res.data.data;
        detailsList.value = JSON.parse(res.data.data.procData)
        processState.value = detaildata.value.processState
    });
}
watchEffect(() => {
    render()
})
</script>

<style scoped>
@import '../assets/approval.css';
</style>
